<template>
  <!--头部轮播5个进度条-->
  <div class="pmgressbar">
    <div v-for="(item,i) in index1" :key="i" class="pmgressbar-5">
      <div class="pmgressbar-slc" :id="`d${i}`" :style="{'width':item+'%'}"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index1: [0, 0, 0, 0, 0],
      sum: 0,
      timer: ""
    };
  },
  methods: {
    get() {
      // console.log(this.index[this.sum])
      if (this.sum == 4) {
        this.sum = 0;
      }
      let elm = document.getElementById("d" + this.sum);
      elm.style.width = this.index1[this.sum] + "%";
      //   var add = this.index1[this.sum];
      if (this.index1[this.sum] < 100) {
        this.index1[this.sum] += 0.2;
      } else {
        this.index1[this.sum] = 0;
        elm.style.width = 0;
        this.sum++;
      }
    }
  },
  mounted() {
    this.timer = setInterval(this.get, 10);
  }
};
</script>
<style lang="css" scoped>
/*头部轮播5个进度条css样式*/
.pmgressbar {
  width: 190px;
  height: 2px;
  position: absolute;
  left: 0px;
  top: 250px;
}
.pmgressbar-5 {
  width: 32px;
  height: 2px;
  background-color: #000;
  float: left;
  margin-right: 3px;
}
.pmgressbar-slc {
  height: 2px;
  background-color: #fff;
}
</style>